<template>
	<div class="order">
		<div class="oo">
		<img src="../../assets/img/logo.3739ba12.png"/>
		<p>手机号注册/登录</p>
		</div>
		<div class="ii">
			<input type="text" placeholder="请输入手机号"/>
		</div>
		<div class="pp">
			<input type="text" placeholder="请输入验证码"/>
		<div class="uu">
				<button>获取验证码</button>
		</div>
		</div>
		<div class="hh">
			<span>一键注册/登录</span>
		</div>
		<div class="tt">
			<div class="ww">
				<span>非大陆手机号登录</span>
				<span>账号密码登录</span>
			</div>
		</div>
		<div class="ll">
			<img src="../../../public/imgss/wx.4d8763f2.png" />
			<img src="../../../public/imgss/qq.2fc75e53.png" />
		</div>
		<div class="zz">
			<input type="checkbox" />
			<span>未注册游侠客账号的手机，登录时将同时注册，登录代表您已同意</span>
			<span>登录即代表您已同意</span>
		</div>
		<br />
		<div class="kk">
			<font>体验游侠客微信小程序</font>
		</div>
		<BottomNav :propsurl='arrUrl'></BottomNav>
	</div>
</template>

<script>
	import BottomNav from '../default/BottomNav.vue';
	export default{
		name:'Order',
		components:{
			BottomNav
		},
		data(){
			return{
				arrUrl : ['imgss/di2.png', 'imgss/di4.png' , 'imgss/di5.png']
			}
		}
	}
</script>

<style scoped>
	.order{
		margin: 0;
		    padding: 0;
		    border: 0;
		    outline: 0;
		    list-style: none;
		    font-size: 0.26rem;
		    word-wrap: break-word;
	}
	*{
		margin: 0;
		    padding: 0;
		    border: 0;
		    outline: 0;
		    list-style: none;
		    font-size: 0.26rem;
		    word-wrap: break-word
	}
	.oo{
		margin-top: 0.16rem;
		text-align: center;
		margin: auto;
	}
	.oo p{
		font-weight: 600;
		font-size: 20px;
	}
	.ii input{
		width: 100%;
		    height: .88rem;
		    padding: .24rem .25rem .24rem .25rem;
		    font-family: PingFang SC;
		    font-weight: 300;
		    opacity: 1;
		    font-size: 0.38rem;
		    background-color: rgba(241,241,241,.3);
		    border-radius: .1rem;
		    -webkit-appearance: none;
		    margin-top: .36rem;
			margin-left: 30px;
	}
	.pp input{
		width: 100%;
		    height: .88rem;
		    padding: .24rem .25rem .24rem .25rem;
		    font-family: PingFang SC;
		    font-weight: 300;
		    opacity: 1;
		    font-size: .38rem;
		    background-color: rgba(241,241,241,.3);
		    border-radius: .1rem;
		    -webkit-appearance: none;
		    margin-top: .36rem;
			box-sizing: border-box;
			margin-left: 30px;
	}
	.uu{
		width: 100%;
		height: 2.5rem;   
		top: 5rem;
		right: 0.1rem;
		position: absolute;
	}
	.uu button{
		width: 90%;
		    height: 90%;
		    background: none;
		    color: #ecc927;
		    font-size: .28rem;
		    text-align: right;
		    font-family: PingFang SC;
		    font-weight: 800;
		    line-height: .22rem;
		    opacity: 1;
	}
	.hh{
		    width: 100%;
		    height: .88rem;
		    border-radius: .1rem;
		    margin-top: .36rem;
		    line-height: .43rem;
		    opacity: 1;
		    display: flex;
			margin-left: 10px;
		    justify-content: center;
		    align-items: center;
		    background: linear-gradient(
		135deg
		, #ffed5c 0%, #ffce06 100%);
		    color: #161616;
	}
	.hh span{
	font-size: .32rem;
    font-family: PingFang SC;
    font-weight: 400;
	}
	.tt{
		    width: 100%;
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		    height: .37rem;
		    margin-top: .24rem;
		    padding: 0 .25rem;
		   }
	.ww span{    
		    font-size: .38rem;
		    font-family: PingFang SC;
		    font-weight: 400;
		    line-height: 1.22rem;
		    color: #aeaeae;
		    opacity: 1;
			margin-right: 100px;
			margin-left: 60px;
	        }
	.ll{
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:  0.42rem;
		margin: auto;
	}
	.ll img{
	width: .84rem;
    height: .84rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: inline-block;
	}
	.zz{
		margin: 0;
		    padding: 0;
		    border: 0;
		    outline: 0;
		    list-style: none;
		    font-size: 0.26rem;
		    word-wrap: break-word;
			margin-left: 49px;
	}
	.zz span{
		font-family: PingFang SC;
		    font-weight: 400;
		    line-height: .33rem;
		    color: #aeaeae;
		    opacity: 1;
		    display: inline-block;
	}
	.kk{
		height: .9rem;
		    width: 100%;
		    background: #fff;
		    box-shadow: 0px -1px 4px rgb(0 0 0 / 8%);
		    opacity: 1;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		
	}
	.kk font{
		font-size: .28rem;
		    font-family: PingFang SC;
		    font-weight: 400;
		    line-height: .19rem;
		    color: #ecc927;
		    opacity: 1;
	}
</style>
